<template>
	<view class="wrap">
		<view class="u-tabs-box">
			<u-tabs-swiper ref="tabs" name="title" :list="tabs" :current="current" @change="change" :is-scroll="false"
				:active-color="appTheme.checkColor" :inactive-color="appTheme.checkColor">
			</u-tabs-swiper>
		</view>
		<swiper class="swiper-box" :current="swiperCurrent" @transition="transition" @animationfinish="animationfinish">
			<swiper-item class="swiper-item" v-for="(tabItem, tabIndex) in tabs" :key="tabIndex">
				<scroll-view scroll-y style="height: 100%; padding-top: 10rpx;">
					<view class="evlItem" v-for="(item,index) in tabItem.list">
						<view class="evaluate-item" @click="itemClick(tabIndex, item)">
							<view class="title">{{wrapTitle(tabIndex, item)}}</view>
							<view v-if="tabIndex===1" class="time">{{$u.timeFormat(item.evaluateTime, 'yyyy-mm-dd')}}</view>
							<view v-else class="time">{{item.evaluateTime}}</view>
							<view class="evaluate-more">
								<view class="baby-name">
									宝贝名称：{{item.childrenName}}
								</view>
								<view class="month">
									测评时月龄{{item.month}}月
								</view>
								<view class="teacher">
									测评人:{{wrapTeacher(tabIndex, item)}}
								</view>
							</view>
						</view>
					</view>
				</scroll-view>
				
			</swiper-item>
		</swiper>
	</view>
</template>

<script>
	import { evlPsycalList, healthList } from '@/api/evaluate.js'
	import appMixin from '@/mixins/app.js'

	export default {
		mixins: [appMixin],
		data() {
			return {
				tabs: [{
					title: '心理行为测评',
					key: 1,
					request: evlPsycalList,
					list: [],
				}, {
					title: '儿保测评',
					key: 2,
					request: healthList,
					list: []
				}],
				current: 0,
				swiperCurrent: 0,
			}
		},
		onLoad(options) {
			console.log(options);
			this.getData(this.tabs[0]);
			this.getData(this.tabs[1]);
			
			try{
				const index = parseInt(options.index);
				this.current = index;
				this.swiperCurrent = index;
			} catch (e) {}
		},
		methods: {
			getData(item) {
				item.request().then(res => {
					console.log(res);
					item.list = res.data.content;
				})
			},
			itemClick(index, item) {
				console.log(item);
				if (index === 0) {
					this.$u.route({
						url: 'pages_evaluate/evaluate/evaluate-result',
						params: {
							'evaluateRecordId': item.evaluateRecordId,
						}
					})
				} else if (index === 1) {
					this.$u.route({
						url: 'pages_evaluate/evaluate/health',
						params: {
							'evaluateRecordId': item.id,
						}
					})
				}
			},
			
			wrapTitle(index, item) {
				if (index === 0) {
					return '心理行为测评报告'
				} else if (index === 1) {
					return '健康体检报告'
				}
			},
			
			wrapDate(index, item) {
				if (index === 0) {
					return item.evaluateTime;
				} else if (index === 1) {
					return this.formatTimestamp(item.evaluateTime, 'yyyy-mm-dd');
				}
			},
			
			wrapTeacher(index, item) {
				if (index === 0) {
					return item.evaluateTeacher;
				} else if (index === 1) {
					return item.evaluateName
				}
			},
			
			// tab栏切换
			change(index) {
				this.swiperCurrent = index;
			},
			transition({
				detail: {
					dx
				}
			}) {
				this.$refs.tabs.setDx(dx);
			},
			animationfinish({
				detail: {
					current
				}
			}) {
				this.$refs.tabs.setFinishCurrent(current);
				this.swiperCurrent = current;
				this.current = current;
			},
		}
	}
</script>

<style lang="scss">
	page{
		background-color: $app-page-bg-color;
	}
	.wrap {
		display: flex;
		flex-direction: column;
		height: calc(100vh - var(--window-top));
		width: 100%;
	}

	.swiper-box {
		flex: 1;
	}

	.swiper-item {
		height: 100%;
		width: 100%;
	}

	.evlItem {
		background-color: #FFFFFF;
		border-radius: 20rpx;
		padding-left: 30rpx;
		padding-right: 30rpx;
		padding-top: 20rpx;
		padding-bottom: 20rpx;
		margin-top: 20rpx;
		margin-bottom: 20rpx;
		margin-left: 30rpx;
		margin-right: 30rpx;
	}
	
	.evaluate-item{
		display: flex;
		flex-direction: column;
		color: $app-font-color;
		.title{
			font-size: 30rpx;
			font-weight: bold;
		}
		
		.time{
			font-size: 26rpx;
			margin-top: 10rpx;
		}
		
		.evaluate-more{
			display: flex;
			flex-direction: row;
			margin-top: 10rpx;
			font-size: 22rpx;
			.month{
				
			}
			
			.teacher{
				margin-left: 20rpx;
			}
			
			.baby-name{
				margin-right: 20rpx;
			}
		}
	}
</style>
